<div>
  <div class="dialog-title">
    <h3>Add to Application</h3>
  </div>
  <div class="dialog-body">
    <form name="addToApplicationForm" novalidate>
      <fieldset ng-disabled="disableInputs">
        <legend>Add this {{ctrl.apiObject.kind | humanizeKind}} to application:</legend>
        <div class="form-group"  ng-class="{'has-error' : ctrl.addType === 'env' && ctrl.application && !ctrl.canAddRefToApplication}">
          <div class="application-select">
            <ui-select autofocus id="application" ng-model="ctrl.application" on-select="ctrl.checkApplicationContainersRefs($item)" required="true" ng-disabled="ctrl.disableInputs">
              <ui-select-match placeholder="{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}">
              <span>
                {{$select.selected.metadata.name}}
                <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
              </span>
              </ui-select-match>
              <ui-select-choices
                repeat="application in (ctrl.applications) | filter : { metadata: { name: $select.search } } track by (application | uid)"
                group-by="ctrl.groupByKind">
                <span ng-bind-html="application.metadata.name | highlight : $select.search"></span>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <div class="has-error" ng-if="ctrl.addType === 'env' && ctrl.application && !ctrl.canAddRefToApplication">
          <span class="help-block">
            The {{ctrl.apiObject.kind | humanizeKind}} has already been added to this application.
          </span>
        </div>
        <legend>Add {{ctrl.apiObject.kind | humanizeKind}} as:</legend>
        <div class="radio">
          <label for="env">
            <input id="env" type="radio" ng-model="ctrl.addType" value="env" >
            Environment variables
          </label>
        </div>
        <div ng-if="ctrl.addType === 'env'" class="choice-contents clearfix">
          <div class="has-warning" ng-if="ctrl.hasInvalidEnvVars">
            <div class="help-block">
              <span class="pf-icon pficon-warning-triangle-o" aria-hidden="true"></span>
              Some of the keys for {{ctrl.apiObject.kind | humanizeKind}} <strong>{{ctrl.apiObject.metadata.name}}</strong> are not valid environment variable names and will not be added.
            </div>
          </div>
          <div class="form-group">
            <div class="control-label">
              <label>Prefix</label>
              <a href="" class="pficon pficon-info field-help"
                 aria-hidden="true"
                 uib-popover="Optionally, you can specify a prefix to use with environment variables."
                 popover-trigger="focus">
              </a>
            </div>
            <span class="control-input" ng-class="{'has-error': addToApplicationForm.envPrefix.$error.pattern && addToApplicationForm.envPrefix.$touched}">
              <input class="form-control"
                     name="envPrefix"
                     id="envPrefix"
                     placeholder="(optional)"
                     type="text"
                     ng-pattern="/^[A-Za-z_][A-Za-z0-9_]*$/"
                     aria-describedby="env-prefix-help"
                     ng-disabled="ctrl.addType !== 'env' || !ctrl.application"
                     ng-model="ctrl.envPrefix"
                     autocorrect="off"
                     autocapitalize="off"
                     spellcheck="false">
                <div class="help-block" ng-show="addToApplicationForm.envPrefix.$error.pattern && addToApplicationForm.envPrefix.$touched">
                  Prefix can contain numbers, letters, and underscores, but can not start with a number.
                </div>
                <span class="sr-only" id="env-prefix-help">Optionally, you can specify a prefix to use with environment variables.</span>
            </span>
          </div>
        </div>
        <div class="radio">
          <label for="volume">
            <input id="volume" type="radio" ng-model="ctrl.addType" value="volume">
            Volume
          </label>
        </div>
        <div ng-if="ctrl.addType === 'volume'" class="choice-contents clearfix">
          <div class="form-group">
            <div class="control-label">
              <label class="required">Mount Path</label>
              <a href="" class="pficon pficon-info field-help"
                 aria-hidden="true"
                 uib-popover="Mount Path for the volume. A file will be created in this
                              directory for each key from the {{ctrl.apiObject.kind | humanizeKind}}.
                              The file contents will be the value of the key."
                 popover-trigger="focus">
              </a>
            </div>
            <div class="control-input" ng-class="{'has-error': (addToApplicationForm.mountVolume.$error.oscUnique || (addToApplicationForm.mountVolume.$error.pattern && addToApplicationForm.mountVolume.$touched))}">
              <input class="form-control"
                     name="mountVolume"
                     id="mountVolume"
                     type="text"
                     ng-pattern="/^\/.*$/"
                     osc-unique="ctrl.existingMountPaths"
                     aria-describedby="mount-path-help"
                     ng-disabled="ctrl.addType !== 'volume' || !ctrl.application"
                     ng-required="ctrl.addType === 'volume'"
                     ng-model="ctrl.mountVolume"
                     autocorrect="off"
                     autocapitalize="off"
                     spellcheck="false">
              <div class="help-block" ng-show="addToApplicationForm.mountVolume.$error.pattern && addToApplicationForm.mountVolume.$touched">
                Mount path must be a valid path to a directory starting with <code>/</code>.
              </div>
              <div class="help-block" ng-show="addToApplicationForm.mountVolume.$error.oscUnique">
                The mount path is already used. Please choose another mount path.
              </div>
              <span class="sr-only" id="mount-path-help">
                Mount Path for the volume. A file will be created in this
                directory for each key from the {{ctrl.apiObject.kind | humanizeKind}}.
                The file contents will be the value of the key.
              </span>
            </div>
          </div>
        </div>
        <div ng-if="ctrl.canAddRefToApplication">
          <legend ng-if-start="ctrl.application.spec.template.spec.containers.length > 1">Containers:</legend>
          <div ng-if-end class="form-group container-options">
            <div ng-if="ctrl.attachAllContainers">
              The {{ctrl.apiObject.kind | humanizeKind}} will be added to all containers. You can
              <a href="" ng-click="ctrl.attachAllContainers = false">select specific containers</a>
              instead.
            </div>
            <div ng-if="!ctrl.attachAllContainers" class="form-group">
              <label class="sr-only required">Containers</label>
              <select-containers
                ng-model="ctrl.attachContainers"
                pod-template="ctrl.application.spec.template"
                ng-required="true"
                help-text="Add the {{ctrl.apiObject.kind | humanizeKind}} to the selected containers.">
              </select-containers>
            </div>
          </div>
        </div>
        <div class="button-group pull-right">
          <button
            class="btn btn-default"
            ng-class="{'dialog-btn': isDialog}"
            ng-click="ctrl.onCancel()">
            Cancel
          </button>
          <button type="submit"
                  class="btn btn-primary"
                  ng-class="{'dialog-btn': isDialog}"
                  ng-click="ctrl.addToApplication()"
                  ng-disabled="addToApplicationForm.$invalid || (ctrl.addType === 'env' && !ctrl.canAddRefToApplication)"
                  value="">
            Save
          </button>
        </div>
      </fieldset>
    </form>
    <div class="updating" ng-if="ctrl.updating">
      <div class="spinner spinner-lg" aria-hidden="true"></div>
      <h3>
        <span class="sr-only">Updating</span>
      </h3>
    </div>
  </div>
</div>
